<template>
  <div class="medical-record-page">
    <van-nav-bar title="病历档案" left-arrow @click-left="goBack" />
    <div class="content">
      <img class="illustration" src="@/assets/images/bj.png" alt="病历档案" />
      <van-button class="upload-btn" type="primary" block @click="triggerUpload">点击上传</van-button>
      <input ref="fileInput" type="file" accept="image/*,.pdf,.doc,.docx" style="display:none" @change="handleFileChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const fileInput = ref<HTMLInputElement | null>(null)

function goBack() {
  router.back()
}

function triggerUpload() {
  fileInput.value?.click()
}

function handleFileChange(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (files && files.length > 0) {
    showToast('已选择文件: ' + files[0].name)
    // 这里可以添加上传逻辑
  }
}
</script>

<style scoped lang="scss">
.medical-record-page {
  min-height: 80vh;
  background: #f7f8ff;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.illustration {
  width: 300px;
  height: 300px;
  margin-bottom: 40px;
  opacity: 0.95;
}
.upload-btn {
  width: 380px;
  height: 80px;
  font-size: 36px;
  background: #4ec9b4;
  border-radius: 10px;
  color: #fff;
  margin-top: 10px;
}
</style> 